Test the build

Option 1. Jetpack Beta

• Install and activate Jetpack Beta.
• Use this build by searching for PR number 9131 or branch name fix/woopay-opt-in-blocks-field in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.

Build info:

• Latest commit: 7df0452
• Build time: 2024-07-23 03:38:29 UTC

Note: the build is updated when a new commit is pushed to this PR.

Size Change: +1.1 kB (0%)

Total Size: 1.32 MB

_{compressed-size-action}

Could you also check please autofill of the phone number? Manual entry works as expected but autofill looks incorrect.

@leonardola fixed on 3480ce0

@pierorocca this PR addresses that too.

I thought so Alefe based on the field color. Thanks for confirming.

@leonardola I think this is expected, one hr for each section on mobile and none for desktop, all other sections work like that. It's possible that other plugins add content below WooPay section so each section adds its own separator below.

@nikkivias could you confirm?

While we're waiting for design input, looking at the original Figma designs from the Blocks refresh work, "Save my info" looks clearly associated with the Payment Options section. When there's a section below, the hr is introduced. When there isn't an additional section, it doesn't look like an hr is added.

@pierorocca at least on WooCommerce 9.1, on mobile the hr is added on every section.

Gotch @alefesouza. Yeah definitely need design validation.

Hi team, confirming that the line separator shows up per section on mobile. You will notice the same if your scroll higher and inspect other sections. Although I thought Save my info is meant to be part of Payment section?

@nikkivias got it, looking Leonardo's screenshots here, do you think any change is needed?

Hi @pierorocca @alefesouza @leonardola and team

Coming in here with screenshots

I would say that Save my info needs to be more clearly associated with Payment options, but at the moment the Checkout blocks does not do visual "associations", so on mobile they will appear as separate because they are in fact, "separate blocks." This is why I've been pushing for subsections, but that's an issue for another day.

Desktop

Add separator line above Add a note... (or below Save my info? not sure) to associate Save my info with Payments more

Mobile

Keep as is.

I think the ideal state is possible @alefesouza since that's our WooPayments component correct?

@pierorocca yes, I've implemented it on the latest commit.